<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue v-for 事件</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>

    <div id="vm">
        <p v-on:click="selectItem(item)" v-for="(item,index) in fruits" v-bind:key="item.id">{{index+1}}. {{item.name}} => {{item.price}}元/公斤</p>
        
        <button @click="totalPrice()">各买1公斤合计</button>
    
    </div>

    <script>

        var vm = new Vue({
            el: '#vm',
            data: {
                fruits: [
                    {
                        id: 1,
                        name: '苹果',
                        price: 2.5
                    },
                    {
                        id: 2,
                        name: '水蜜桃',
                        price: 5.3
                    },
                    {
                        id: 3,
                        name: '莱阳梨',
                        price: 3.5
                    },
                    {
                        id: 4,
                        name: '地雷瓜',
                        price: 1.9
                    },
                    {
                        id: 5,
                        name: '榴莲',
                        price: 21
                    }
                ]

            },
            methods:{
                selectItem(item){
                    console.log('item->',item);
                    alert('你点击了:'+item.name);
                },
                totalPrice(){
                    let total = 0;
                    this.fruits.forEach(function(v,k){
                        total += v.price;
                    });
                    alert('合计:'+total+'元');
                }
            }
        });

    </script>
    
</body>
</html>